<template>
    <div class="yibiao-chart-box">
        <div class="yibiao-chart-container"> <!-- 仪表盘图表容器 -->

        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
export default {
    name: 'yibiaoChart',
    props: {
        chartData: { // 图表数据对象,通过props传过来
            type: Object,
            default: () => ({
                data: []
            })
        }
    },
    data() {
        return {

        }
    },
    mounted() {
        this.generateChart();
    },
    methods: {
        generateChart() { // 生成图表
            let value = 55.33;
            let title = '满意度';
            let int = value.toFixed(2).split('.')[0];
            let float = value.toFixed(2).split('.')[1];
            let myChart = echarts.init(this.$el.querySelector('.yibiao-chart-container'));
            let echartData = this.chartData.data;
            let option = {
                title: {
                    text: '{a|'+ value +'%}\n{c|'+ title +'}',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        rich:{
                            a: {
                                fontSize: 20,
                                color: '#29EEF3'
                            },
                            b: {
                                fontSize: 16,
                                color: '#29EEF3',
                                padding: [0,0,4,0]
                            },
                            c: {
                                fontSize: 16,
                                color: '#ffffff',
                                padding: [5,0]
                            }
                        }
                    }
                },
                series: [
                    {
                        type: 'gauge',
                        radius: '80%',
                        clockwise: false,
                        startAngle: '90',
                        endAngle: '-269.9999',
                        splitNumber: 25,
                        detail: {
                            offsetCenter: [0, -20],
                            formatter: ' '
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [0, '#2CFAFC'],
                                    [55.33 / 100, 'rgba(32,187,252,0.15)'],
                                    [1, '#027aff']
                                ],
                                width: 19
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            length: 20,
                            lineStyle: {
                                color: '#FFFFFF',
                                width: 2
                            }
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    {
                        type: 'pie',
                        name: '内层细圆环',
                        radius: ['46.6%', '52%'],
                        hoverAnimation: false,
                        clockWise: false,
                        itemStyle: {
                            normal: {
                                color: '#d5e8fd'
                            }
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    },
                    {
                        type: 'pie',
                        name: '内层环',
                        radius: [0, '46%'],
                        hoverAnimation: false,
                        clockWise: false,
                        itemStyle: {
                            normal: {
                                color: '#0177fa'
                            }
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
}
</script>